<template>
  <div ref="boxwrap" class="PersonnelAnalysisThird">
    <el-form ref="form" :model="form" :inline="true" size="mini">
      <el-form-item label="快捷选择">
        <el-radio-group v-model="form.repType" @change="repTypeChange">
          <el-radio label="1" border>日</el-radio>
          <el-radio label="2" border>月</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item :label="datelabel">
        <el-date-picker v-model="form.datetime" :placeholder="'选择'+datelabel" :type="dateType" :clearable="false" />
      </el-form-item>
      <el-form-item label="制程">
        <el-select v-model="form.regionid" placeholder="请选择" class="filter-item" filterable multiple collapse-tags @change="LoadLines()">
          <el-option v-for="item in form.regionArr" :key="item.id" :label="item.name" :value="item.id" />
        </el-select>
      </el-form-item>
      <el-form-item label="线别">
        <el-select v-model="form.lineId" placeholder="请选择" class="filter-item" filterable multiple collapse-tags @change="getTableList()">
          <el-option v-for="item in form.lineArr" :key="item.id" :label="item.name" :value="item.id" />
        </el-select>
      </el-form-item>
    </el-form>
    <div class="table-main">
      <div class="table-list">
        <vxe-table
          ref="xTable"
          :loading="tableLoading"
          border
          :height="tableHeight"
          :print-config="tablePrint"
          :data="tableList"
          show-footer
          :footer-method="footerMethod"
          auto-resize
        >
          <vxe-column type="seq" width="60" />
          <vxe-column v-for="(item, index) in tableCol" :key="index" :field="item.prop" :title="item.label" :width="item.width || ''" />
        </vxe-table>
      </div>
      <div class="operate-btns">
        <!-- <el-button class="" type="primary" plain icon="el-icon-edit" @click="dataInput">数据维护</el-button> -->
        <el-button class="" type="primary" plain icon="el-icon-download" @click="downloadTable">导出</el-button>
        <el-button class="" type="primary" plain icon="el-icon-printer" @click="printTable">打印</el-button>
      </div>
    </div>

    <el-drawer
      title="数据维护"
      :visible.sync="drawer"
      direction="rtl"
      :before-close="handleClose"
    >
      <el-form ref="dynamicValidateForm" :model="dynamicValidateForm" label-width="80px">
        <el-form-item
          prop="rectime"
          label="日期"
        >
          <el-input v-model="dynamicValidateForm.rectime" />
        </el-form-item>
        <el-form-item
          prop="position"
          label="岗位"
        >
          <el-input v-model="dynamicValidateForm.position" />
        </el-form-item>
        <el-form-item
          prop="yingdao"
          label="应到"
        >
          <el-input v-model="dynamicValidateForm.yingdao" />
        </el-form-item>
        <el-form-item
          prop="shidao"
          label="实到"
        >
          <el-input v-model="dynamicValidateForm.shidao" />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="submitForm('dynamicValidateForm')">提交</el-button>
        </el-form-item>
      </el-form>
    </el-drawer>
  </div>
</template>

<script>
import { getProcess, getLineByProcess } from '@/api/conf'
import { isValued, idsStr, tbPrintStyle } from '@/utils'

export default {
  name: 'PersonnelAnalysisThird',
  data() {
    return {
      form: {
        repType: '1',
        datetime: new Date(),
        regionid: [],
        regionArr: [],
        lineId: [],
        lineArr: []
      },
      dateObj: {
        '1': { type: 'date', label: '日期' },
        '2': { type: 'month', label: '月份' }
      },
      dateType: 'date', // 日期选择器--类型 year/month/date
      datelabel: '日期',
      lineQuery: {
        regionid: ''
      },
      tablePrint: {},
      tableLoading: false,
      tableCol: [
        { label: '日期', prop: 'recTime' },
        { label: '制程', prop: 'regionName' },
        { label: '线别', prop: 'lineName' },
        { label: '岗位', prop: 'position' },
        { label: '应到', prop: 'yingdao' },
        { label: '实到', prop: 'shidao' }
      ],
      tableList: [],
      tableWidth: '100%',
      tableHeight: 'auto',
      drawer: false,
      dynamicValidateForm: {
        rectime: '',
        position: '',
        yingdao: '',
        shidao: ''
      }
    }
  },
  mounted() {
    this.getTableHeight()
  },
  created() {
    this.getProcessList()
    this.tablePrint = tbPrintStyle()
  },
  methods: {
    getTableHeight() {
      const that = this
      const dom = this.$refs.boxwrap
      this.$erd.listenTo(dom, function(element) {
        that.tableHeight = dom.clientHeight - 100
        that.tableWidth = dom.clientWidth
      })
    },
    getProcessList() {
      getProcess().then(res => {
        this.form.regionArr = res.data
        this.LoadLines()
      })
    },
    LoadLines() {
      if (isValued(this.form.regionid)) {
        this.lineQuery.regionid = idsStr(this.form.regionid, 'id', true)
      } else {
        this.lineQuery.regionid = idsStr(this.form.regionArr, 'id', false)
      }
      getLineByProcess(this.lineQuery).then(res => {
        this.form.lineArr = res.data
        this.getTableList()
      })
    },
    repTypeChange(value) {
      this.dateType = this.dateObj[value].type
      this.datelabel = this.dateObj[value].label
      this.getTableList()
    },
    getTableList() {
      this.tableLoading = true
      // 假数据
      for (let i = 1; i <= 30; i++) {
        this.tableList.push({
          recTime: '2021-11-23',
          regionName: '',
          lineName: '',
          userId: '员工' + (i < 10 ? '00' + i : '0' + i),
          position: '岗位一',
          yingdao: 3,
          shidao: 3
        })
      }
      this.tableLoading = false
      this.footerMethod()
    },
    footerMethod() {
      return [
        ['合计', '', '', '', '', '90', '90']
      ]
    },
    downloadTable() {
      this.downloadLoading = true
      import('@/vendor/Export2Excel').then(excel => {
        // 表头str
        const tHeader = ['序号']
        // 表头字段
        const filterVal = ['index']
        this.tableCol.forEach(item => {
          tHeader.push(item.label)
          filterVal.push(item.prop)
        })
        const list = this.tableList // 未分页的全部数据
        const data = this.formatJson(filterVal, list)
        excel.export_json_to_excel({
          header: tHeader,
          data,
          filename: '人员分析三阶报表'
        })
        this.downloadLoading = false
      })
    },
    formatJson(filterVal, jsonData) {
      return jsonData.map((v, idx) => filterVal.map(j => {
        v.index = idx + 1
        return v[j]
      }))
    },
    printTable() {
      this.$refs.xTable.print({ data: this.tableList })
    },
    dataInput() {
      this.drawer = true
    },
    handleClose(done) {
      this.$confirm('确认关闭？')
        .then(_ => {
          done()
        })
        .catch(_ => {})
    },
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          alert('submit!')
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    resetForm(formName) {
      this.$refs[formName].resetFields()
    },
    removeDomain(item) {
      var index = this.dynamicValidateForm.domains.indexOf(item)
      if (index !== -1) {
        this.dynamicValidateForm.domains.splice(index, 1)
      }
    },
    addDomain() {
      this.dynamicValidateForm.domains.push({
        value: '',
        key: Date.now()
      })
    }
  }
}
</script>

<style lang="scss">
.PersonnelAnalysisThird {
    width: 100%;
    height: 100%;

    .el-radio{
        color: #fff;
    }
}
.el-radio{
    margin-right: 0;
}
</style>
